<template>
  <div id="container" style="width: 100vw; height: 90vh" />
</template>

<script setup>
import { lazyAMapApiLoaderInstance } from '~/services/injected-amap-api-instance'
let map = shallowRef(null)

lazyAMapApiLoaderInstance.then(() => {
  initMap()
})
function initMap() {
  map = new AMap.Map('container', {
    viewMode: '3D',
    zoom: 15,
    center: [116.335183, 39.941735],
  })
  AMap.plugin(['AMap.ControlBar'], function () {
    var bar = new AMap.ControlBar()
    map.addControl(bar)
  })

  /*
   * 添加Canvas图层
   */
  var canvas = document.createElement('canvas')
  canvas.width = canvas.height = 200

  var context = canvas.getContext('2d')
  context.fillStyle = 'rgb(0,100,255)'
  context.strokeStyle = 'white'
  context.globalAlpha = 1
  context.lineWidth = 2

  var radious = 0
  var draw = function () {
    context.clearRect(0, 0, 200, 200)
    context.globalAlpha = (context.globalAlpha - 0.01 + 1) % 1
    radious = (radious + 1) % 100

    context.beginPath()
    context.arc(100, 100, radious, 0, 2 * Math.PI)
    context.fill()
    context.stroke()

    // 刷新渲染图层
    CanvasLayer.reFresh()

    AMap.Util.requestAnimFrame(draw)
  }

  var CanvasLayer = new AMap.CanvasLayer({
    canvas: canvas,
    bounds: new AMap.Bounds([116.328911, 39.937229], [116.342659, 39.946275]),
    zooms: [3, 18],
  })

  map.add(CanvasLayer)
  draw()
}
</script>

<style lang="scss" scoped></style>
